<template>
	<view>
		<p style="width: 100%;">{{question}}</p>
		<view class="one_massage" v-for="item in message">
			<view class="user">
				<image src="../../static/anonymity.png" style="height: 60%;width: 60%;"></image>
				<text>热心的网友</text>
			</view>
			<view class="massage">
				<textarea class="tx">{{item}}</textarea>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { ref } from 'vue';
	
	let question =ref<string>(null);
	let id=ref<string>(null);
	let message = ref<string[]>();
	
	onLoad((option)=>{
		
		uni.request({
		    url: 'http://121.40.242.216:8081/api/bottle/message',
			method:'GET',
		    data: {
				id:option.id
		    },
		    header: {
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
		        console.log(res.data);
				message.value=res.data!.data
		    }
		});
		console.log(option.id);
		console.log(option.question);
		question.value=option.question;
		id.value=option.id;
	})
</script>

<style>  
    .one_massage {
		margin-top: 1rpx;
        display: flex; 
		height: auto;
		align-items: flex-start;
		min-height: 220rpx;
		background: rgb(232.8, 233.4, 234.6);
    }  
    .user {  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        border-radius: 30rpx;  
        height: 200rpx;  /* 固定高度 */  
        width: 30%;      /* 占 30% 的宽度 */  
        margin: 20rpx;  
        background: aliceblue;  
    }  
    .massage {  
        height: auto;  /* 高度与.user部分保持一致 */  
		min-height: 200rpx;
        width: 70%;      /* 占 70% 的宽度 */  
        margin-top: 20rpx;  
        margin-right: 20rpx;  

    }  
    .tx {  
        width: 100%;	 /* 使textarea占满父元素的宽度 */  
        height: auto;/* 使textarea占满父元素的高度 */
		min-height: 200rpx; 
        background: aliceblue;  /* 背景色 */  
        border: none; /* 去掉默认边框 */  
        padding: 10rpx; /* 内边距 */  
        box-sizing: border-box; /* 确保内边距包含在元素宽高内 */  
		border-radius: 10rpx;
    }  
</style> 